<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>找企业课</title>

		<style>
			.content ul li:last-child{
				border-bottom: none;
			}
			/* 头部tab */
			.top-tab{
				position: relative;
			}
			/** 选项卡 **/
			ul.tab-item{
				background-color: #f0eff3;
				font-size: 0;
				padding: 0 5px;
				border-bottom: 1px solid #dcdcdc;
			}
			ul.tab-item li{
				display: inline-block;
				width: 25%;
				text-align: center;	
				padding: 10px 0;
			}
			ul.tab-item li span{
				display: inline-block;
				font-size: 14px;
				color: #b4b4b4;
			}
			ul.tab-item li .arrow{
				width: 13px;
				height: 9px;
				margin-left: 5px;
				background-image: url(../images/icons/arrow_down_gray.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			ul.tab-item li.active span,
			ul.tab-item li.select span{
				color: #42455c;
			}
			ul.tab-item li.active .arrow{
				background-image: url(../images/icons/arrow_down_black.png);
			}
			ul.tab-item li.select .arrow{
				background-image: url(../images/icons/arrow_up_black.png);
			}
			/** 选项内容 **/
			ul.tab-ctnt{
				position: absolute;
				top: 35px;
				left: 0;
				right: 0;
				background-color: #fff;
				z-index: 10;
			}
			ul.sort li,
			ul.area li,
			ul.price li{
				padding: 10px 0;
				text-align: center;
				font-size: 14px;
				border-bottom: 1px solid #dcdcdc;
			}
			ul.sort li.select,
			ul.area li.select,
			ul.price li.select{
				color: #53ceca;
			}
			/** 目的 **/
			ul.purpose{
				padding: 13px 10px;
			}
			.purpose-item{
				margin-bottom: 5px;
			}
			.purpose-item .title{
				font-size: 0;
				padding-bottom: 4px;
			}
			.purpose-item .left-border{
				display: inline-block;
				width: 5px;
				height: 14px;
				margin-right: 5px;
				background-image: url(../images/icons/purpose_title.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.purpose-item .sub-title{
				font-size: 13px;
				color: #b4b4b4;
				vertical-align: top;
			}
			ul.purpose-ctnt{
				padding: 10px 15px;
			}
			ul.purpose-ctnt li{
				display: inline-block;
				/*padding: 5px 15px;*/
				width: 75px;
				height: 25px;
				margin-right: 10px;
				margin-bottom: 20px;
				text-align: center;
				font-size: 14px;
				line-height: 25px;
			}
			ul.purpose-ctnt li.select{
				border: none;
				border-radius: 20px;
				-webkit-border-radius: 20px;
				background-color: #53ceca;
				color: #fff;
			}
			/* 私教 */
			ul.trainer li.item{
				position: relative;
				height: 130px;
				margin-bottom: 5px;
			}
			.trainer .item img{
				display: block;
				width: 100%;
				height: 100%;
				border: none;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			} 
			/** b-position **/
			.b-position{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 9px 15px;
				overflow: hidden;
			}
			.b-left{
				float: left;
			}
			.b-left .class-name{
				font-size: 18px;
				color: #fff;
			}
			.b-left .times{
				font-size: 13px;
				color: #fff;
			}
			.b-right{
				float: right;
				margin-top: 15px;
				font-size: 0;
				color: #fff;
			}
			.money-icon{
				font-size: 14px;
				margin-right: 5px;
			}
			.money{
				font-size: 18px;
				font-weight: 600;
			}
			/** t-position **/
			.t-position{
				position: absolute;
				top: 10px;
				right: 15px;
				display: inline-block;
			}
			.t-position span{
				display: block;
				margin-bottom: 5px;
				padding: 2px 8px;
				border: none;
				border-radius: 10px;
				-webkit-border-radius: 10px;
				font-size: 12px;
				color: #fff;
			}
			.new{
				background-color: #53ceca;
			}
			.hot{
				background-color: #f55e1c;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<!-- 头部tab -->
			<div class="top-tab">
				<!-- 选项卡 -->
				<ul class="tab-item">
					<li class="active">
						<span>智能排序</span>
						<span class="arrow"></span>
					</li>
					<li class="select">
						<span>目的</span>
						<span class="arrow"></span>
					</li>
					<li>
						<span>区域</span>
						<span class="arrow"></span>	
					</li>
					<li>
						<span>价位</span>
						<span class="arrow"></span>
					</li>
				</ul>
				<!-- 选项内容 -->
				<ul class="tab-ctnt">
					<ul class="sort" style="display: none;">
						<li class="sort-item select">智能排序</li>
						<li class="sort-item">人气最高</li>
						<li class="sort-item">价格从低到高</li>
						<li class="sort-item">价格从高到低</li>
					</ul>
					<ul class="purpose" style="display: none;">
						<li class="purpose-item">
							<div class="title">
								<span class="left-border"></span>
								<span class="sub-title">大家都在练</span>
							</div>
							<ul class="purpose-ctnt">
								<li>脊柱保养</li>
								<li>背痛修复</li>
								<li>产后修复</li>
								<li>塑形</li>
								<li>减肥</li>
								<li>放松身心</li>
							</ul>
						</li>
						<li class="purpose-item">
							<div class="title">
								<span class="left-border"></span>
								<span class="sub-title">女性爱自己</span>
							</div>
							<ul class="purpose-ctnt">
								<li class="select">身体排毒</li>
								<li>经期规律</li>
							</ul>
						</li>
						<li class="purpose-item">
							<div class="title">
								<span class="left-border"></span>
								<span class="sub-title">加强体质，改善生活</span>
							</div>
							<ul class="purpose-ctnt">
								<li>柔韧身体</li>
								<li>增加力量</li>
								<li>提升平衡</li>
								<li>冥想</li>
								<li>呼吸控制</li>
								<li>改善失眠</li>
								<li>焦虑头痛</li>
								<li>惯性便秘</li>
								<li>肠胃紊乱</li>
							</ul>
						</li>
						<li class="purpose-item">
							<div class="title">
								<span class="left-border"></span>
								<span class="sub-title">缓解病痛</span>
							</div>
							<ul class="purpose-ctnt">
								<li>支气管炎</li>
								<li>高血压</li>
								<li>心脏病</li>
								<li>关节炎</li>
								<li>哮喘</li>
								<li>糖尿病</li>
								<li>抗抑郁</li>
							</ul>
						</li>
						<li class="purpose-item">
							<div class="title">
								<span class="left-border"></span>
								<span class="sub-title">推荐</span>
							</div>
							<ul class="purpose-ctnt">
								<li>艾扬格</li>
							</ul>
						</li>

					</ul>
					<ul class="area" style="display: none;">
						<li class="area-item">不限</li>
						<li class="area-item">昌平</li>
						<li class="area-item select">朝阳</li>
						<li class="area-item">东城</li>
						<li class="area-item">大兴</li>
					</ul>
					<ul class="price" style="display: none;">
						<li class="price-item">300以下</li>
						<li class="price-item">300-500</li>
						<li class="price-item select">500-1000</li>
						<li class="price-item">1000-2000</li>
						<li class="price-item">2000以上</li>
					</ul>
				</ul>
			</div>
			<!-- 私教 -->
			<ul class="trainer">
				<li class="item">
					<img src="../images/1.png" alt="">
					<div class="b-position">
						<div class="b-left">
							<p class="class-name">白领肩颈修复套餐</p>
							<p class="times">10次</p>
						</div>
						<div class="b-right">
							<span class="money-icon">¥</span>
							<span class="money">200</span>
						</div>
					</div>
					<span class="t-position">
						<span class="new">NEW</span>
						<span class="hot">HOT</span>
					</span>
				</li>
				<li class="item">
					<img src="../images/1.png" alt="">
					<div class="b-position">
						<div class="b-left">
							<p class="class-name">办公室瑜伽套餐</p>
							<p class="times">20次</p>
						</div>
						<div class="b-right">
							<span class="money-icon">¥</span>
							<span class="money">200</span>
						</div>
					</div>
					<span class="t-position">
						<span class="hot">HOT</span>
					</span>
				</li>
				<li class="item">
					<img src="../images/1.png" alt="">
					<div class="b-position">
						<div class="b-left">
							<p class="class-name">放松身心套餐</p>
							<p class="times">100次</p>
						</div>
						<div class="b-right">
							<span class="money-icon">¥</span>
							<span class="money">200</span>
						</div>
					</div>
					<span class="t-position">
					</span>
				</li>
			</ul>
		</div>
	</body>
</html>